<template>
    <!-- 计数器功能区 -->
    <div class="calc">
        <div class="input-num">
            <button @click="sub">-</button> 
            <span v-text="num"></span>     
            <button @click="add">+</button>
        </div>
    </div>
</template>
  
<script>
    export default {
        data(){
            return {
                num: 0 
            }
        },
        methods:{
            add() {
                if (this.num < 10) {
                    this.num++
                } else {
                    alert('已经达到最大值 10 了！')
                }
            },
            sub() {
                if (this.num > 0) {
                    this.num--
                } else {
                    alert('已经是最小值 0 了！')
                }
            }     
        }
    }
</script>
  
<style lang="less" scoped>
    body{
        background-color: #f5f5f5;
    }
    .calc {
        width: 480px;
        height: 80px;
        margin: 350px auto;
    }
    .input-num {
        margin-top:20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 4px 4px 4px #adadad;
        border: 1px solid #c7c7c7;
        background-color: #c7c7c7;
    }
    .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: #ad2a27;
        cursor: pointer;
        border: none;
        outline: none;
        background-color:rgba(0, 0, 0, 0);
    }
    .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 80px;
        font-family:auto;
        background-color: white;
    }
</style>
  